<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>考生管理</title>
    <link href="/css/front/style.css" rel="stylesheet">
    <link href="/css/front/body.css" rel="stylesheet">
    <!--引入自定义的模态框css-->
    <link href="/css/custommodal/custommodal.css">

    <script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
</head>
<!--发送按钮样式设计-->
<style>
    #btn_checkCode{
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 37px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 11px;
        margin: 4px 2px;
        cursor: pointer;
    }
</style>
<body>
<div class="container">
    <section id="content">
        <form  id="form_registerInfo">
            <h1>考生管理系统登录</h1>
            <div>
                <input type="text"  placeholder="用户账户" required="" id="userAccount" name="userAccount" onblur="validate_userAccount()">
                <P class="help-block" style="font-size: smaller;text-align: center;color: red"></P>
            </div>

            <div>
                <input type="password"  placeholder="密码" required="" id="userPassword" name="userPassword" onblur="validate_userPassword()">
                <P class="help-block" style="font-size: smaller;text-align: center;color: red"></P>
            </div>
            <div>
                <input type="text" name="checkCode" placeholder="输入验证码" required=""
                       id="checkCode" style="width:130px" />
                <button type="button" onclick="sendCheckCode()" id="btn_checkCode">点击发送验证码</button>
            </div>
            <div>
                <center>
                    <input type="button" value="登录" class="roundbutton btn btn-primary" id="btn_login" />
                </center>
            </div>
        </form>
        <!-- form --> </section>
    <!-- content -->
</div>
<!-- container -->
<br><br><br><br>
<div style="text-align:center;">
</div> <br><br><br><br>
<div>
    <center>
        <h1>包头市人事考试中心版权所有</h1>
    </center>
</div>
</br>
<!--数据校验-->
<script type="text/javascript">
    //校验用户账号
    function validate_userAccount() {
        $("#userAccount").next('p').text("");
        var reg = /^[a-zA-Z0-9_-]{4,16}$/;
        var inputuserAccount=$("#userAccount").val();
        if (reg.test(inputuserAccount)){


                return  true;

        } else {
            $("#userAccount").next("p").text("用户账号为4到16位（字母，数字）");
            return false;
        }
    }

    //校验用户密码
    function validate_userPassword() {
        $("#userPassword").next('p').text("");
        var reg = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
        var inputuserPass=$("#userPassword").val();
        if (reg.test(inputuserPass)){
            return  true;
        } else {
            $("#userPassword").next("p").text("密码包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符");
            return false;
        }
    }

</script>
<!--点击发送验证码按钮获取验证码-->
<script type="application/javascript">
    /*发送验证码前校验信息的函数*/
    function validate_inputInfo() {

        var userAccountR=validate_userAccount();

        var passR=validate_userPassword();
        return userAccountR&&passR;
    }
</script>
<!--点击发送按钮获取用户名对应的手机号并发送验证码-->
<script type="text/javascript">
    function sendCheckCode() {
        var result=validate_inputInfo();
        if (result){
            var inputuserTel=$("#userTel").val();
            $.ajax({
                url:"/user/sendCheckCode",
                data:"userTel="+inputuserTel,
                type:"POST",
                success:function (result) {
                    var message=result.message;
                    alert(message);
                }
            });
        }else {
            alert("请填写信息后再发送验证码");
        }
    }
</script>
<!--点击登录按钮，用户登录-->
<script type="text/javascript">
    $("#btn_login").click(function () {
        window.location.href="/config-waitingRoom"
    });


</script>
<script type="text/javascript">
    <!--发送按钮的倒计时-->
    $("button[id='btn_checkCode']").click(function(event) {
        var time = 60;
        settime($(this));
        function settime(obj){
            if (time==0) {
                $(obj).attr('disabled', false);
                $(obj).html("发送验证码");
                time = 60;
                return;
            } else{
                $(obj).attr('disabled', true);
                $(obj).html(time+"秒后重新发送");
                time--;
            }
            setTimeout(function() {
                settime(obj)
            },1000)
        }

    });
</script>
<script type="text/javascript">
    function flushCheckCode(obj) {
        obj.src = (obj.src + '?' + new Date())
    }
</script>
</body>
</html>
